본문으로 건너뛰기

23.08.05

오늘 한 일​

  • 프로그라피 세션 참여
  • 카공실록 리팩토링

ky instance의 response 타입 바꾸기​

문제​

끝에 .json과 generic으로 APIResponse를 붙여주어야 하는 불편함이 있었다.

export const getPlace = async (id: number) => {
  const { data } = await api.get(`api/v1/places/${id}`).json<APIResponse<Place>>();

  return data;
};

APIResponse 타입은 이렇다.

interface APIResponse<T> {
  result?: string;
  message?: string;
  data: T;
}

해결​

create로 만든 ky instance를 통해 api라는 객체를 만들었다.

get, post, put, delete 메서드를 만들어서 json 메서드까지 호출하도록 했다.

import { retryRequest } from './retryRequest';
import { setHeader } from './setHeader';
import ky from 'ky';

import type { Input, Options } from 'ky/distribution/types/options';

const instance = ky.create({
  prefixUrl: process.env.NEXT_PUBLIC_API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
  hooks: {
    beforeRequest: [setHeader],
    afterResponse: [retryRequest],
  },
});

const api = {
  get: <T>(url: Input, options?: Options) => instance.get(url, options).json<APIResponse<T>>(),
  post: <T>(url: Input, options?: Options) => instance.post(url, options).json<APIResponse<T>>(),
  put: <T>(url: Input, options?: Options) => instance.put(url, options).json<APIResponse<T>>(),
  delete: <T>(url: Input, options?: Options) =>
    instance.delete(url, options).json<APIResponse<T>>(),
};

export default api;

결과​

깔끔해졌다✨

- const { data } = await api.get(`api/v1/places/${id}`).json<APIResponse<Place>>();
+ const { data } = await api.get<Place>(`api/v1/places/${id}`);

🤔자식 컴포넌트에게 비동기 데이터를 props로 전달하기 vs 자식 컴포넌트 내부에서 비동기 데이터를 가져오기​

1. 자식 컴포넌트에게 비동기 데이터를 props로 전달하기​

function Parent() {
  const { data } = useGetData();

  return (
    <>
      <Child1 data={data} />
      <Child2 data={data} />
    </>
  );
}

2. 자식 컴포넌트 내부에서 비동기 데이터를 가져오기​

function Parent() {
  const { data } = useGetData();

  return (
    <>
      <Child1 />
      <Child2 />
    </>
  );
}

function Child1() {
  const { data } = useGetData();

  return <div>{data}</div>;
}

function Child2() {
  const { data } = useGetData();

  return <div>{data}</div>;
}

내 생각​

상황에 따라 다를 것 같다.

  • 1번을 사용하는 경우

    • depth가 깊지 않을 때
    • 자식 컴포넌트가 특정 도메인에 종속되지 않아야 할 때

  • 2번을 사용하는 경우

    • depth가 깊을 때

react query 메인테이너(TKDodo)의 의견​

Discussion에 Context API와 RQ를 같이 사용하는지에 대한 질문이 있었다.

TKDodo는 일반적으로는 커스텀 useQuery 훅을 필요할 때마다 호출하는 것을 선호한다고 한다. 그렇지만 Context API도 나쁘지 않은 방법이라고 한다. 다만 모든 트리가 재렌더링되는걸 막기 위해 메모이제이션해두어야 한다고 한다.

내일 할 일​

  • gloddy 개발
  • 카공실록 개발